<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Base64图片</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      color: #333;
    }

    h1 {
      text-align: center;
      color: #4a4a4a;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .image-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      resize: vertical;
      word-wrap: break-word;
      white-space: pre-wrap;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      color: #777;
      /* 占位符颜色 */
    }

    textarea:focus::placeholder {
      color: transparent;
      /* 当焦点在textarea上时隐藏占位符 */
    }

    button {
      display: block;
      width: 100%;
      padding: 10px;
      font-size: 16px;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }

    img {
      width: auto;
      height: auto;
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .error-message {
      color: red;
      margin-top: -10px;
      margin-bottom: 10px;
      display: none;
    }

    .loader {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      animation: spin 1s linear infinite;
      display: none;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Base64图片</h1>
    <p>data:image/png;base64, | http:// | https://</p>
    <textarea id="image-url" placeholder="在此输入图片的SRC..."></textarea>
    <button onclick="updateImage()">更新图片</button>
    <div class="loader" id="loader"></div>
    <br>
    <div class="image-container">
      <div class="error-message" id="errorMessage">请输入有效的图片SRC</div>
      <img id="display-image"
        src=""
        alt="显示图片">
    </div>
  </div>

  <script>
    function updateImage() {
      const url = document.getElementById('image-url').value.trim();
      const image = document.getElementById('display-image');
      const loader = document.getElementById('loader');
      const errorMessage = document.getElementById('errorMessage');

      if (url) {
        loader.style.display = 'block'; // 显示加载器
        errorMessage.style.display = 'none';
        image.src = '';
        image.onload = () => loader.style.display = 'none'; // 图片加载完成后隐藏加载器
        image.onerror = () => {
          loader.style.display = 'none';
          errorMessage.style.display = 'block';
          image.src = ''; // 如果加载失败，清除src属性
        };
        image.src = url;
      } else {
        errorMessage.style.display = 'block';
      }
    }
  </script>
</body>

</html>